<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:object="${book}">
<head>
    <meta charset="UTF-8">
    <title>图书详情</title>
    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 30px;
            background-color: #f9f9f9;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .card {
            width: 400px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .card p {
            margin: 15px 0;
            font-size: 16px;
        }

        .card strong {
            color: #333;
        }

        .action-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #2196F3;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            margin-top: 20px;
        }

        .action-btn:hover {
            background-color: #1976D2;
        }

        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 0;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .navbar {
            background-color: #2c3e50;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }

        .navbar-menu {
            display: flex;
            gap: 20px;
        }

        .navbar-menu a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .navbar-menu a:hover {
            background-color: #34495e;
        }

        .navbar-auth {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .navbar-auth span {
            font-size: 16px;
        }

        .auth-btn {
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #2196F3;
            color: white;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .auth-btn:hover {
            background-color: #1976D2;
        }

        .content {
            flex: 1;
            padding: 30px;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        form {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        label {
            font-size: 14px;
        }

        input[type="text"],
        input[type="number"],
        input[type="datetime-local"] {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 6px 14px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #2c3e50;
            color: white;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #1a2733;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 10px 12px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f0f0f0;
            color: #333;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        .action-btn {
            background-color: #2196F3;
            margin: 2px;
            padding: 6px 12px;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .action-btn:hover {
            background-color: #1976D2;
        }

        .footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 14px;
        }

        .footer a {
            color: #2196F3;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }
    </style>
    <script>
        window.onload = function () {
            const token = localStorage.getItem('token');
            const userType = localStorage.getItem('userType');
            const borrowBtn = document.getElementById('borrowBtn');
            const bookStatus = '[[${book.status}]]';
            if (!token || userType !== 'user' || bookStatus !== 'AVAILABLE') {
                if (borrowBtn) borrowBtn.style.display = 'none';
            }
        };
    </script>
</head>
<body>

<header class="navbar">
    <a href="/" class="navbar-brand">应急图书管理系统</a>
    <div class="navbar-menu" id="menuSection">
        <a href="/book/public/books">首页</a>
        <a href="/book/public/books">图书列表</a>
    </div>
    <div class="navbar-auth" id="authSection">
        <a href="/user/login" class="auth-btn">登录</a>
    </div>
</header>

<main class="content">

    <h1>图书详情</h1>
    <div class="card">
        <p><strong>书名:</strong> <span th:text="*{title}"></span></p>
        <p><strong>作者:</strong> <span th:text="*{author}"></span></p>
        <p><strong>出版社:</strong> <span th:text="*{publisher} ?: '无'"></span></p>
        <p><strong>ISBN:</strong> <span th:text="*{isbn}"></span></p>
        <p><strong>状态:</strong> <span th:text="*{status == 'AVAILABLE' ? '可借' : '已借'}"></span></p>
        <a th:if="${isLoggedIn}" th:href="@{/borrowing/student/borrow/{id}(id=*{id})}" class="action-btn" id="borrowBtn">借阅</a>
    </div>

</main>



<footer class="footer">
    <p>© 2025 应急图书管理系统 | 联系我们: <a href="mailto:support@bookmanagement.com">support@bookmanagement.com</a></p>
</footer>
</body>
</html>